<template>
  <div class="goodsDetails" style="animation-duration: 500ms">
    <div class="goodsdeta_main">
      <div style="margin-top:20px;margin-bottom:20px">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/optimGoods/siftGoods' }"
            >全部商品</el-breadcrumb-item
          >
          <el-breadcrumb-item>商品详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 商品详情展示盒子 -->
      <el-card
        style="overflow:visible"
        shadow="never"
        :body-style="{
          padding: '30px'
        }"
      >
        <div class="show_Box">
          <div class="error_box" @click="showerrorbox">
            <i class="el-icon-warning"></i>
            <span style="font-size:14px;color:gray">纠错</span>
          </div>
          <!-- 商品 图片轮播 -->
          <!-- <div class="showgoods">
            <el-carousel
              trigger="click"
              height="411px"
              style="border-radius: 12px;"
              indicator-position="outside"
            >
              <el-carousel-item
                v-for="item in 4"
                :key="item"
                style="border-radius: 12px;"
              >
                <div class="demo-image__preview">
                  <el-image
                    style="width: 100%"
                    fit="cover"
                    :src="url"
                    :preview-src-list="srcList"
                  >
                  </el-image>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div> -->
          <div class="showgoods">
            <div class="demo-image__lazy">
              <el-image
                style="width:420px;border-radius:10px"
                fit
                :src="goodsInfo.goods_img"
                lazy
              >
                <div slot="placeholder" class="image-slot">
                  <Goodsloading></Goodsloading>
                </div>
                <div slot="error" class="image-slot">
                  <!-- <i class="el-icon-picture-outline"></i> -->
                </div>
              </el-image>
            </div>
          </div>
          <!-- 商品详情 -->
          <div class="goods_right">
            <!-- 商品标题 -->
            <div class="goods_title">
              <div class="title_left">
                <img
                  style="width: 20px;"
                  :src="require('@/assets/images/01.png')"
                  alt=""
                />
                <a
                  :href="goodsInfo.goods_url"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <div
                    style="margin-left:10px;font-weight: bold;font-size: 20px;font-family: 'Helvetica Neue',Helvetica, 'Microsoft YaHei',sans-serif,Arial,'宋体';    font-style: normal;"
                  >
                    {{ goodsInfo.goods_name }}
                  </div>
                </a>
              </div>
              <!-- <span class="pop">
                淘宝拼购
              </span> -->
            </div>
            <!-- 推广文案 -->
            <div class="goods_info">
              {{ goodsInfo.copywriting }}
            </div>
            <div class="juan_Box">
              <!-- <el-card shadow="always" :body-style="{ padding: '0px' }"> -->
              <!-- 领取详情 -->
              <div class="juannum">
                <!-- <img :src="require('@/assets/images/th_orange.png')" alt="" /> -->
                <div class="geted">
                  <span> {{ goodsInfo.coupon_collar_count }}人已领劵 </span>
                </div>
                <div style="margin-right:10px">
                  <span style="font-size:14px;color:#c3c3c3;">
                    近30天引入量
                  </span>
                  {{ goodsInfo.goods_day_num }}
                </div>
              </div>
              <!-- 优惠信息 -->
              <div class="top_data">
                <div class="data_box">
                  <p class="data_top">
                    ¥
                    {{ goodsInfo.after_coupon_price }}
                  </p>
                  <p class="data_main" style="text-decoration: line-through;">
                    淘宝价:{{ goodsInfo.goods_price }}
                  </p>
                  <p class="data_bot">劵后价</p>
                </div>
                <div class="data_box">
                  <p class="data_top">{{ goodsInfo.commission_than }}%</p>
                  <p class="data_main">
                    预估佣金:¥{{ goodsInfo.commission_rate_percent }}
                  </p>
                  <p class="data_bot">佣金比</p>
                </div>
                <div class="data_box">
                  <p class="data_top">
                    <span>¥{{ goodsInfo.coupon_price }}</span>
                    <a
                      style="cursor: pointer;"
                      :href="goodsInfo.coupon_url"
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      <el-button size="mini" class="round_btn" round
                        >领取</el-button
                      >
                    </a>
                  </p>
                  <p class="data_main">
                    有效期至:
                    {{
                      goodsInfo.goods_end_time
                        | formatTime("yyyy-MM-dd hh:mm:ss")
                    }}
                  </p>
                  <p class="data_bot">
                    优惠券<span style="color: #999;"
                      >(剩余{{ goodsInfo.coupon_remnant_num }} 张)</span
                    >
                  </p>
                </div>
              </div>
              <!-- <el-divider></el-divider> -->
              <!-- 评价信息 -->
              <!-- <div class="goods_evaluate">
                <div>
                  <span style="font-size: 16px;color: #000;font-weight: bold;"
                    >商品评价</span
                  >
                  <el-button size="mini" class="round_btn" round
                    >查看评价></el-button
                  >
                </div>
                <div class="top_data2">
                  <div class="data_box2">
                    <p class="data_top2">100%</p>
                    <p class="data_bot2">好评率</p>
                  </div>
                  <el-divider direction="vertical"></el-divider>
                  <div class="data_box2">
                    <p class="data_top2">1</p>
                    <p class="data_bot2">好评数</p>
                  </div>
                  <el-divider direction="vertical"></el-divider>
                  <div class="data_box2">
                    <p class="data_top2">3.50</p>
                    <p class="data_bot2">店铺评分</p>
                  </div>
                </div>
              </div> -->
              <!-- </el-card> -->
            </div>
            <!-- 商店信息 -->
            <div class="shops_box">
              <div class="shops_left">
                <div>{{ goodsInfo.shop_name }}</div>
                <!-- <el-rate
                  v-model="value"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}"
                >
                </el-rate> -->
                <!-- <el-progress
                  :percentage="parseFloat(goodsInfo.data.good_rate_percentage)"
                ></el-progress> -->
              </div>
              <div class="shops_right">
                <div
                  v-for="item in goodsInfo.data.content"
                  :key="item.title"
                  class="item_evaluate"
                >
                  <span class="titem_itle">{{ item.title }}: </span>
                  <span :style="{ color: item.level >= 0 ? 'red' : 'green' }">{{
                    item.score
                  }}</span>
                </div>
              </div>
            </div>
            <!-- 按钮组 -->
            <div class="btns">
              <el-button type="primary" class="copy_btn2" @click="applyGoods">
                <div class="disflex">
                  <span class="iconplus"></span>
                  <span>申请推广</span>
                </div>
              </el-button>

              <el-button style="margin-left:10px" class="look_info2" plain>
                <a
                  :href="goodsInfo.goods_url"
                  target="_blank"
                  style="color:blue"
                >
                  <div class="disflex">
                    <span>查看详情</span>
                    <span class="iconright"></span>
                  </div>
                </a>
              </el-button>
              <el-button class="collect_btn2" @click="joincollect" plain>
                <div class="disflex">
                  <span class="heart" ref="heart"></span>
                  <span>加入收藏</span>
                </div>
              </el-button>
            </div>
          </div>
        </div>
      </el-card>
      <!-- 推广人信息 -->
      <!-- <div style="margin:20px 0;">
        <el-card shadow="always" :body-style="{ padding: '0px' }">
          <div class="source">
            <div class="source_left">
              <div class="head_photo">
                <img
                  style="width: 20px;"
                  :src="require('@/assets/images/01.png')"
                  alt=""
                />
              </div>
              <div class="user_info">
                <div class="user_name">猪猪女孩</div>
                <div>
                  <span class="aect">
                    <span class="aect_img"></span>
                    已认证</span
                  >
                  <span class="team">
                    <span class="team_img"></span>
                    招商团队</span
                  >
                </div>
              </div>
              <div class="top_data2">
                <div class="data_box2">
                  <p class="data_top2">1000</p>
                  <p class="data_bot2">今日领券</p>
                </div>
                <el-divider direction="vertical"></el-divider>
                <div class="data_box2">
                  <p class="data_top2">64113</p>
                  <p class="data_bot2">总领券</p>
                </div>
                <el-divider direction="vertical"></el-divider>
                <div class="data_box2">
                  <p class="data_top2">153</p>
                  <p class="data_bot2">在线商品</p>
                </div>
              </div>
            </div>
            <div class="showurl">
              <img :src="require('@/assets/images/appleimg.jpg')" alt="" />
              <img :src="require('@/assets/images/appleimg.jpg')" alt="" />
              <img :src="require('@/assets/images/appleimg.jpg')" alt="" />
              <img :src="require('@/assets/images/appleimg.jpg')" alt="" />
              <img :src="require('@/assets/images/appleimg.jpg')" alt="" />
            </div>
            <div class="jiantou"></div>
          </div>
        </el-card>
      </div> -->
      <!-- 文案图片 -->
      <div style="margin:20px 0;">
        <el-card shadow="never" :body-style="{ padding: 'px' }">
          <div class="copyimg">
            <div>
              <img :src="goodsInfo.goods_yx_img" alt="" />
              <!-- <img :src="require('@/assets/images/appleimg.jpg')" alt="" />
              <img :src="require('@/assets/images/appleimg.jpg')" alt="" />
              <img :src="require('@/assets/images/appleimg.jpg')" alt="" />
              <img :src="require('@/assets/images/appleimg.jpg')" alt="" /> -->
            </div>
            <div class="showevaluate">
              <span>展开评价</span>
            </div>
          </div>
        </el-card>
      </div>
      <!-- 营销文案 -->
      <div class="box_card">
        <el-card shadow="never" :body-style="{ padding: '10px' }">
          <div slot="header" class="clearfix">
            <div class="card_imgg">
              <img :src="require('@/assets/images/th_icon.png')" alt="" />
              <span>营销文案</span>
              <span style="margin-left:15px">
                <el-button type="primary" size="mini" @click="yxdialog = true"
                  >自定义模板</el-button
                ></span
              >
            </div>
          </div>
          <div class="card_main">
            <div class="copywrit_left">
              <el-card
                class="box-card"
                :body-style="{ padding: '5px' }"
                style="margin-bottom:5px"
              >
                <div class="copyleft_header" @click="chatshow = true">
                  <div>社群精准文案</div>
                  <div class="write_box">
                    <div class="write_info">
                      <div class="username">
                        <p>{{ copywritobj.nickname }}的聊天记录</p>
                      </div>
                      <div class="userask">
                        <p>
                          {{ copywritobj.nickname }}:
                          <span class="useraskinfo">{{
                            copywritobj.friend_circle
                          }}</span>
                        </p>
                        <p>
                          {{ copywritobj.nickname }}:
                          <span v-text="contentstr" class="useraskinfo"></span>
                        </p>
                        <p>
                          {{ copywritobj.nickname }}:
                          <span class="useraskinfo">[图片]</span>
                        </p>
                      </div>
                    </div>
                    <el-divider></el-divider>
                    <div
                      style="font-size: 12px;padding-left: 20px;padding-bottom:2px;background-color: #fff;"
                    >
                      聊天记录
                    </div>
                    <div
                      style="width: 100%;height: 6px;background-color: #f6f6f6;"
                    ></div>
                  </div>
                </div>
              </el-card>
              <!-- 聊天记录 -->
              <el-dialog
                title=""
                :visible.sync="chatshow"
                width="30%"
                :before-close="handleClose"
              >
                <span slot="title" class="dialog-title">
                  <el-button type="primary" plain size="mini"
                    >使用教程</el-button
                  >
                  <el-button
                    type="primary"
                    plain
                    size="mini"
                    @click="chattaokeshow = false"
                    >生成粉丝文案转发</el-button
                  >
                  <el-button
                    type="primary"
                    plain
                    size="mini"
                    @click="chattaokeshow = true"
                    >生成淘客文案转发</el-button
                  >
                  <el-button type="primary" plain size="mini"
                    >转淘口令</el-button
                  >
                  <el-button
                    type="primary"
                    plain
                    size="mini"
                    @mousedown.once="handleOk2('allchat')"
                    @click="handleOk('allchat')"
                    >一键复制</el-button
                  >
                </span>
                <div id="allchat" style="height:690px;overflow-y:auto">
                  <div class="chatrecord2" v-if="chattaokeshow">
                    <div class="chattaoke">
                      <button
                        style="border: 0px;border-style: none;width: 100%;"
                        @mousedown.once="handleOk2('chattaoke')"
                        @click="handleOk('chattaoke')"
                      >
                        <div id="chattaoke">
                          <img
                            v-if="isimg"
                            style="width: 150px; height: 200px;border-radius: 12px;object-fit: cover;display:block"
                            :src="liveshotList[0]"
                          />
                          <!-- :src="`http://` + copywritobj.goods_yx_img" -->
                          <div class="">
                            <div>{{ copywritobj.goods_name }}</div>
                            <div>
                              原价:{{ copywritobj.goods_price }}元【劵后{{
                                copywritobj.after_coupon_price
                              }}元】 包邮
                            </div>
                            <div>领劵:{{ copywritobj.coupon_url }}</div>
                            <div>抢购:{{ goodsInfo.goods_url }}</div>
                            <div>{{ copywritobj.copywriting }}</div>
                          </div>
                        </div>
                      </button>
                    </div>
                    <el-divider></el-divider>
                    <div class="infocard">
                      <div
                        style="width:100%;padding-top:10px;padding-bottom:10px"
                      >
                        <el-card
                          class="box-card"
                          :body-style="{ padding: '10px' }"
                          style="margin-bottom:5px;width: 310px;margin: 0 auto;"
                        >
                          <div
                            style="display: flex;justify-content: space-around;align-items: center;"
                          >
                            <div style="margin-bottom:8px">
                              <p>
                                ￥
                                <span style="color:red">{{
                                  copywritobj.after_coupon_price
                                }}</span>
                              </p>
                              <p>卷后价</p>
                            </div>
                            <el-divider direction="vertical"></el-divider>
                            <div style="margin-bottom:8px">
                              <p>
                                ￥
                                <span style="color:blue">{{
                                  copywritobj.coupon_price
                                }}</span>
                              </p>
                              <p>优惠卷</p>
                            </div>
                            <el-divider direction="vertical"></el-divider>
                            <div style="margin-bottom:8px">
                              <p>
                                <span style="color:orange">{{
                                  copywritobj.commission_than
                                }}</span
                                >%
                              </p>
                              <p>
                                <span style="color:blue">
                                  {{
                                    (
                                      copywritobj.goods_price *
                                      (copywritobj.commission_than / 100)
                                    ).toFixed(2)
                                  }} </span
                                >元 佣金
                              </p>
                            </div>
                          </div>
                          <div style="margin-bottom:8px;margin-left: 10px;">
                            总销量<span style="color:red">{{
                              copywritobj.goods_day_num
                            }}</span>
                            日销量
                            <span style="color:red">{{
                              copywritobj.today_num
                            }}</span>
                          </div>
                          <div style="margin-bottom:8px;margin-left: 10px;">
                            店铺:{{ copywritobj.shop_name }}
                          </div>
                          <div style="margin-bottom:8px;margin-left: 10px;">
                            放单人:{{ copywritobj.nickname }}
                          </div>
                        </el-card>
                      </div>
                    </div>
                    <div>
                      <button
                        style="border: 0px;border-style: none;width: 100%;"
                        @mousedown.once="handleOk2('searchname')"
                        @click="handleOk('searchname')"
                      >
                        <p>APP搜索标题</p>
                        <p
                          id="searchname"
                          style="text-align:center;padding:10px 0;"
                        >
                          {{ copywritobj.goods_name }}
                        </p>
                      </button>
                    </div>
                    <el-divider></el-divider>
                  </div>
                  <div class="chatrecord">
                    <div class="chatbox1">
                      <button
                        @mousedown.once="handleOk2('friend')"
                        @click="handleOk('friend')"
                        style="border: 0px;border-style: none;width: 100%;background-color:#fff"
                      >
                        <div class="friendbox" id="friendbox">
                          {{ copywritobj.friend_circle }}
                        </div>
                      </button>
                      <el-divider></el-divider>
                      <button
                        @mousedown.once="handleOk2('qqtui')"
                        @click="handleOk('qqtui')"
                        style="border: 0px;border-style: none;width: 100%;background-color:#fff"
                      >
                        <div class="tgbox" id="tgbox">
                          <div v-html="contentstr"></div>
                        </div>
                      </button>
                      <el-divider></el-divider>
                      <div class="imgs_box" id="imgs_box">
                        <el-button
                          type="primary"
                          icon="el-icon-document-copy"
                          @mousedown.once="handleOk2('imgs')"
                          @click="handleOk('imgs')"
                        ></el-button>
                        <div
                          v-for="(item, index) in liveshotList"
                          :key="index"
                          :id="'li' + index"
                        >
                          <button
                            :class="'li' + index"
                            @mousedown.once="handleOk2('li' + index)"
                            @click="handleOk('li' + index)"
                            style="border: 0px;border-style: none;width: 100%;"
                          >
                            <el-image
                              style="width: 100px; height: 100px"
                              :src="item"
                              :preview-src-list="liveshotList"
                            >
                            </el-image>
                          </button>
                          <el-divider></el-divider>
                        </div>
                      </div>
                      <!-- <el-divider></el-divider> -->
                    </div>
                    <!-- <div class="chatbox2">
                    <div v-html="contentstr"></div>
                  </div> -->
                  </div>
                </div>
              </el-dialog>
              <el-card
                class="box-card"
                :body-style="{ padding: '5px' }"
                style="margin-bottom:5px"
              >
                <div class="copyleft_top">
                  <div>实拍图</div>
                  <div class="imgbox" style="height: 180px;">
                    <el-tooltip
                      v-if="liveshotList.length > 0"
                      class="item"
                      effect="light"
                      content="点击复制"
                      placement="right-start"
                      style="padding-top: 5px; padding-bottom: 5px;"
                    >
                      <button
                        class="copybotn"
                        @mousedown.once="handleOk2('imgs')"
                        @click="handleOk('imgs')"
                        style="width: 100%;height: 180px;"
                      >
                        <div class="liveshot" id="imgs">
                          <!-- <el-upload
                        class="avatar-uploader"
                        action="http://gyapi.letuilm.com/upload"
                        :on-success="handleAvatarSuccess3"
                        :multiple="true"
                        :limit="5"
                        list-type="picture"
                        :show-file-list="false"
                        :before-upload="beforeAvatarUpload"
                      >
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload> -->
                          <img
                            v-for="(item, index) in liveshotList"
                            :key="index"
                            style="width: 90px;height:90px;display: inline-block;margin-left:10px;margin-right:0;"
                            :src="item"
                            alt=""
                          />
                        </div>
                      </button>
                    </el-tooltip>
                  </div>
                </div>
              </el-card>
              <el-card
                v-if="marketing_video == ''"
                class="box-card"
                :body-style="{ padding: '5px' }"
              >
                <div class="copyleft_bot">
                  <div>营销视频</div>
                  <div>
                    <!-- <el-upload
                      class="avatar-uploader el-upload--text  videobox"
                      action="http://gyapi.letuilm.com/upload"
                      :show-file-list="false"
                      :on-success="handleVideoSuccess"
                      :before-upload="beforeUploadVideo"
                      :on-progress="uploadVideoProcess"
                    >
                      <video
                        v-if="marketing_video != '' && videoFlag == false"
                        :src="`http://` + marketing_video"
                        class="avatar"
                        style="width: 322px;height: 225px;"
                        controls="controls"
                      >
                        您的浏览器不支持视频播放
                      </video>
                      <i
                        v-else-if="marketing_video == '' && videoFlag == false"
                        class="el-icon-plus avatar-uploader-icon"
                      ></i>
                      <el-progress
                        v-if="videoFlag == true"
                        type="circle"
                        :percentage="videoUploadPercent"
                        style="margin-top:30px;"
                      ></el-progress>
                    </el-upload> -->
                    <video
                      :src="`http://` + marketing_video"
                      class="avatar"
                      style="width: 322px;height: 170px;border-radius: 12px;"
                      controls="controls"
                    >
                      您的浏览器不支持视频播放
                    </video>
                  </div>
                </div>
              </el-card>
            </div>
            <!-- 预览和自定义 -->
            <!-- <div class="copywrit_right"> -->
            <div class="copywrit_preview">
              <div class="th_i">微信文案</div>
              <div class="th_main">
                <div>
                  <div>朋友圈文案</div>
                  <el-tooltip
                    class="item"
                    effect="light"
                    content="点击复制"
                    placement="right-start"
                  >
                    <button
                      @mousedown.once="handleOk2('friend')"
                      @click="handleOk('friend')"
                      class="copybotn"
                    >
                      <div id="friend" class="copybotnbox2">
                        {{ copywritobj.friend_circle }}
                      </div>
                    </button>
                  </el-tooltip>
                </div>
                <div>
                  <div>推广文案</div>
                  <el-tooltip
                    class="item"
                    effect="light"
                    content="点击复制"
                    placement="right-start"
                  >
                    <button
                      @mousedown.once="handleOk2('tgbox')"
                      @click="handleOk('tgbox')"
                      class="copybotn"
                    >
                      <div id="tgbox" class="copybotnbox">
                        <img
                          v-if="isimg"
                          style="width: 100px; height: 100px;border-radius: 12px;object-fit: cover;display:block"
                          :src="liveshotList[0]"
                        />
                        <!-- :src="`http://` + copywritobj.goods_yx_img" -->
                        <div v-html="contentstr"></div>
                      </div>
                    </button>
                  </el-tooltip>
                </div>
              </div>
              <div style="margin-bottom:15px">
                <div>淘口令文案</div>
                <div style="margin-top:10px">
                  <el-checkbox v-model="isimg">带图复制</el-checkbox>
                  <el-checkbox v-model="isurl">转链并存</el-checkbox>
                  <el-checkbox v-model="iswx">微信短链</el-checkbox>
                </div>
              </div>
              <el-button
                round
                class="copywrit1"
                type="primary"
                @click="changeqqurl(1)"
              >
                <span class="copywritimg1"> </span>
                <span>
                  转链
                </span>
              </el-button>
            </div>
            <div class="copywrit_custom">
              <div class="th_i">QQ文案</div>
              <div class="th_main">
                <div>
                  <div>推广文案</div>
                  <el-tooltip
                    class="item"
                    effect="light"
                    content="点击复制"
                    placement="right-start"
                  >
                    <!-- contenteditable="true" -->
                    <button
                      @mousedown.once="handleOk2('qqtui')"
                      @click="handleOk('qqtui')"
                      class="copybotn"
                    >
                      <div
                        id="qqtui"
                        class="copybotnbox"
                        style="height: 465px;"
                      >
                        <!-- <el-image
                            v-if="isimg"
                            style="width: 100px; height: 100px;border-radius: 12px;"
                            :src="goodsInfo.goods_img"
                            fit="cover"
                          ></el-image
                          ><br /> -->
                        <div v-html="qqcontentstr"></div>
                      </div>
                    </button>
                  </el-tooltip>
                </div>
              </div>
              <div>
                <el-button
                  round
                  class="copywrit1 act"
                  type="primary"
                  @click="showmuban"
                >
                  <span class="copywritimg2"></span>
                  <span>
                    编辑
                  </span>
                </el-button>
                <el-button
                  round
                  class="copywrit1"
                  type="primary"
                  @click="changeqqurl(2)"
                >
                  <span class="copywritimg1"></span>
                  <span>
                    转链
                  </span>
                </el-button>
              </div>
            </div>
            <!-- </div> -->
          </div>
        </el-card>
      </div>
      <!-- 自定义模板 -->
      <el-dialog
        title=""
        :visible.sync="yxdialog"
        width="835px"
        :before-close="handleClose2"
        class="yxdialog"
        :modal="true"
        :close-on-click-modal="false"
      >
        <div class="yx_box">
          <div class="yxbox_left">
            <el-card
              class="box-card"
              :body-style="{ padding: '8px' }"
              style=" margin-bottom: 20px"
            >
              <div class="yx_state">
                <div class="yx_title">
                  模板使用说明
                </div>
                <div>
                  模板： 原价<span class="yx_span">#原价#</span>元，领券
                  <span class="yx_span">#券金额#</span>元，只要
                  <span class="yx_span">#券后价#</span> 来看看
                </div>
                <div>
                  效果： 原价 <span class="yx_span"> 213</span>元，领券
                  <span class="yx_span">90</span>元，只要
                  <span class="yx_span">123</span>来看看
                </div>
              </div>
            </el-card>
            <el-card
              class="box-card"
              :body-style="{ padding: '0px' }"
              style=" margin-bottom: 20px"
            >
              <div class="yxlabel_box">
                <div class="yx_label">通用标签</div>
                <div class="disflex1">
                  <span>#标题#</span
                  ><span class="yxinfo" style="margin-left: 29px;"
                    >商品短标题</span
                  >
                  <span class="yxlook"></span>
                </div>
                <div class="disflex1">
                  <span>#券后价#</span
                  ><span class="yxinfo" style="margin-left: 15px;"
                    >商品用券后价格</span
                  >
                  <span class="yxlook">如 998</span>
                </div>
                <div class="disflex1">
                  <span>#原价#</span
                  ><span class="yxinfo" style="margin-left: 29px;"
                    >商品原价</span
                  >
                  <span class="yxlook">如 3000</span>
                </div>
                <div class="disflex1">
                  <span>#券金额#</span
                  ><span class="yxinfo" style="margin-left: 15px;"
                    >优惠券金额</span
                  >
                  <span class="yxlook">如 111</span>
                </div>
                <div class="disflex1">
                  <span>#商品链接#</span
                  ><span class="yxinfo">商品的购买链接地址</span>
                  <span class="yxlook"></span>
                </div>
                <div class="disflex1">
                  <span>#领券链接#</span
                  ><span class="yxinfo">领取优惠券链接地址</span>
                  <span class="yxlook"></span>
                </div>
                <div class="disflex1">
                  <span>#今日销量#</span
                  ><span class="yxinfo" style="margin-left: 0px;"
                    >今日销售总量</span
                  >
                  <span class="yxlook">如 4000</span>
                </div>
                <div class="disflex1">
                  <span>#总销量#</span
                  ><span class="yxinfo" style="margin-left: 14px;"
                    >当前的累积销售总量</span
                  >
                  <span class="yxlook">如 9527</span>
                </div>
                <div class="disflex1">
                  <span>#文案#</span
                  ><span class="yxinfo" style="margin-left: 29px;"
                    >商品的介绍推广文案</span
                  >
                  <span class="yxlook"></span>
                </div>
                <div class="disflex1">
                  <span>#佣金比例#</span
                  ><span class="yxinfo" style="margin-left: 0px;"
                    >商品的佣金比例</span
                  >
                  <span class="yxlook">如 10%</span>
                </div>
                <div class="disflex1">
                  <span>#店铺名称#</span
                  ><span class="yxinfo" style="margin-left: 0px;"
                    >该商品店铺的名称</span
                  >
                  <span class="yxlook">如 XXX旗舰店</span>
                </div>
                <div class="disflex1" style="padding-bottom: 15px;">
                  <span>#放单人昵称#</span
                  ><span class="yxinfo" style="margin-left: -10px;"
                    >商品放单人的昵称</span
                  >
                  <span class="yxlook">如 XXX</span>
                </div>
              </div>
            </el-card>
            <el-card class="box-card" :body-style="{ padding: '0px' }">
              <div class="yxlabel_box">
                <div class="yx_label">高级标签</div>
                <div v-if="activeName == 1">
                  <div class="disflex1">
                    <span>#微信淘口令#</span
                    ><span class="yxinfo" style="width: 220px;">
                      使用微信推广PID生成的淘口令</span
                    >
                    <span class="yxlook"></span>
                  </div>
                  <!-- <div class="disflex1">
                    <span>#快站#</span
                    ><span
                      class="yxinfo"
                      style="margin-left: 40px;width: 220px;"
                      >淘口令使用快站并生成短链接</span
                    >
                    <span class="yxlook"></span>
                  </div> -->
                </div>
                <div v-else>
                  <div class="disflex1">
                    <span>#QQ二合一#</span
                    ><span class="yxinfo" style="width: 220px;"
                      >使用QQ推广PID生成的官方二合一短链</span
                    >
                    <span class="yxlook"></span>
                  </div>
                  <!-- <div class="disflex1">
                    <span>#QQ淘口令#</span
                    ><span class="yxinfo" style="width: 220px;"
                      >使用QQ推广PID生成的淘口令</span
                    >
                    <span class="yxlook"></span>
                  </div>
                  <div class="disflex1">
                    <span>#快站#</span
                    ><span
                      class="yxinfo"
                      style="margin-left: 40px;width: 220px; "
                      >淘口令使用快站并生成短链接</span
                    >
                    <span class="yxlook"></span>
                  </div> -->
                </div>
              </div>
            </el-card>
          </div>
          <div class="yxbox_right">
            <el-card
              class="box-card"
              :body-style="{ padding: '0px' }"
              style="overflow: inherit;"
            >
              <div class="yxbox_rmain">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                  <el-tab-pane label="微信模板" name="1"></el-tab-pane>
                  <el-tab-pane label="QQ模板" name="2"></el-tab-pane>
                </el-tabs>
                <div class="textarea_r" style="position: relative;">
                  <el-input
                    id="emojiInput"
                    ref="texttemplate"
                    type="textarea"
                    :rows="23"
                    v-model="tgtemplate"
                    clearable
                    placeholder="请输入自定义模板!"
                  ></el-input>
                  <div id="exampleInputEmoji">
                    <el-button
                      style="padding: 5px;font-size:20px"
                      @click="toogleDialogEmoji"
                      >😃</el-button
                    >
                    <!-- :pack="pack" -->
                    <!-- :continuousList="true" -->
                    <VEmojiPicker
                      v-show="showDialog"
                      labelSearch="Search"
                      lang="pt-BR"
                      @select="selectEmoji"
                    />
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </div>
        <span
          slot="footer"
          class="dialog-footer"
          style="background-color: #f4f5f7;"
        >
          <el-button @click="yxdialog = false">取 消</el-button>
          <el-button type="primary" @click="dosure(tgtemplate, activeName, 3)"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!-- 精品推荐 -->
      <div class="recommend">
        <div class="recommend_top">
          <span>
            精品推荐
          </span>
        </div>
        <el-divider>为你推荐优质好货</el-divider>
        <div class="goods_bot" v-if="!nogoodsShow">
          <el-row :gutter="24">
            <el-col
              :span="12"
              class="hover_box2"
              v-for="(item, index) in goodsList"
              :key="index"
            >
              <!-- top标签 -->
              <!-- <div class="position_Box">
                      <img
                        class="topimg2"
                        :src="require('@/assets/images/top_big.png')"
                        alt=""
                      />
                      <div class="top_num2">{{ index + 3 }}</div>
                    </div> -->
              <el-card shadow="always" :body-style="{ padding: '0px' }">
                <div class="top_main2">
                  <div
                    class="demo-image__lazy"
                    style="cursor: pointer;width:220px;height:220px"
                    @click="godetails(item.id)"
                  >
                    <el-image
                      class="elimg2"
                      style="width:220px;height:220px"
                      fit
                      :src="item.goods_img"
                      lazy
                    >
                      <div slot="placeholder" class="image-slot">
                        <Goodsloading></Goodsloading>
                      </div>
                    </el-image>
                  </div>
                  <div class="top_right2">
                    <div class="top_roll2">
                      卷后价<span>{{ item.after_coupon_price }}</span
                      >元
                    </div>
                    <div class="top_title2">
                      <div>{{ item.goods_name }}</div>
                    </div>
                    <div class="top_data2">
                      <div>
                        <p>{{ item.goods_day_num }}</p>
                        <p>月销量</p>
                      </div>
                      <div>
                        <p>{{ item.commission_than }}%</p>
                        <p>定向佣金</p>
                      </div>
                      <div>
                        <p>
                          {{
                            (
                              item.goods_price *
                              (item.commission_than / 100)
                            ).toFixed(2)
                          }}
                        </p>
                        <p>佣金</p>
                      </div>
                    </div>
                    <div class="coupon_Box">
                      <div class="coupon_img">
                        <span>劵:</span>
                        <span style="margin-left:-4px"
                          >¥ {{ parseInt(item.coupon_price) }}</span
                        >
                      </div>
                      <div>
                        已领劵:<span style="color:red">{{
                          item.coupon_collar_count
                        }}</span>
                      </div>
                    </div>
                    <el-progress
                      style="width:200px;margin: 0 auto;"
                      :percentage="
                        (item.coupon_collar_count / item.coupon_num) * 100
                      "
                    ></el-progress>
                  </div>
                  <div class="shops_Box2">
                    <div class="shops_action2">
                      <div class="action_box2">
                        <div class="join_collect2">
                          <el-button class="join_btn12" type="primary">
                            <span class="iconimg12"></span>
                            <span>
                              加入收藏
                            </span>
                          </el-button>
                        </div>
                        <div class="copy2">
                          <el-button class="join_btn22" type="primary">
                            <span class="iconimg22"></span>
                            <span>
                              复制文案
                            </span>
                          </el-button>
                        </div>
                        <div class="position_hover">
                          <el-card
                            shadow="always"
                            :body-style="{ padding: '10px' }"
                          >
                            <div class="demo-image__lazy">
                              <el-image
                                class="elimghover"
                                fit
                                :src="item.goods_img"
                              >
                              </el-image>
                            </div>
                            <div>{{ item.goods_name }}</div>
                            <div>淘宝价:{{ item.goods_price }}</div>
                            <div>月销量:{{ item.after_coupon_price }}</div>
                            <div>领卷:{{ item.bondSite }}</div>
                            <div>抢购:{{ item.hotSite }}</div>
                          </el-card>
                        </div>
                      </div>
                    </div>
                    <div class="shops_info22">
                      <el-row :gutter="20">
                        <el-col :span="20">
                          <div class="disflex">
                            <span class="childone">优惠卷剩余:</span>
                            <div class="childtwo">
                              <span style="color:red">{{
                                item.coupon_collar_count
                              }}</span
                              >/{{ item.coupon_num }}
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="20"
                          ><div class="disflex">
                            <span class="childone">店铺:</span>
                            <span class="childtwo">{{ item.shop_name }}</span>
                          </div>
                        </el-col>
                        <el-col :span="20"
                          ><div class="disflex">
                            <span class="childone">放单人:</span>
                            <span class="childtwo">{{ item.nickname }}</span>
                          </div>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <div v-if="nogoodsShow" class="nogoods">
          <div style="padding-top:230px">
            <h3 style="margin-top: 0;padding-top: 25px;">
              抱歉，该商品暂时没有精品推荐
            </h3>
            <h4 style="margin-top: 0;padding-top: 10px;">
              我们会努力寻找更多的商品哦~
            </h4>
          </div>
        </div>
      </div>
      <!-- 弹窗 -->
      <el-dialog
        title="感谢您对商品进行纠错:"
        :visible.sync="errorshow"
        width="600px"
      >
        <el-form :model="form" style="text-align:left">
          <el-form-item label="纠错商品:" label-width="120px">
            <div style="margin-left:10px;font-size: 16px;">
              {{ goodsInfo.goods_name }}
            </div>
          </el-form-item>
          <el-form-item label="纠错类型:" label-width="120px">
            <el-select v-model="form.type" placeholder="请选择纠错类型">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="纠错商品:" label-width="120px">
            <el-input
              v-model="form.desc"
              autocomplete="off"
              type="textarea"
              rows="4"
            ></el-input>
          </el-form-item>

          <el-form-item label="纠错证明:" label-width="120px">
            <div>
              <div
                style="display:flex;justify-content:flex-start;align-items:center"
              >
                <div style="width:100px;height:100px">
                  <!-- action="http://192.168.0.105:80/upload" -->
                  <el-upload
                    class="avatar-uploader"
                    action="http://gyapi.letuilm.com/upload"
                    :on-success="handleAvatarSuccess2"
                    :on-remove="handleRemove2"
                    :limit="3"
                    :multiple="true"
                    :show-file-list="false"
                    :before-upload="beforeAvatarUpload"
                  >
                    <!-- list-type="picture" -->
                    <!-- :on-preview="handlePreview" -->
                    <!-- :file-list="dishonestList" -->
                    <div
                      style="width:100px;height:100px;border:1px solid #000;line-height:100px"
                    >
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                    </div>
                  </el-upload>
                </div>
                <div style="height:100px;margin-left:10px">
                  <el-image
                    v-for="(item, index) in errorList"
                    :key="index"
                    style="width: 100px; height: 100px;"
                    :src="item"
                    :preview-src-list="errorList"
                  >
                  </el-image>
                </div>
              </div>
              <div style="color:red;">
                最多可上传3张图片(选填)
              </div>
            </div>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dosumbit">提 交</el-button>
        </div>
      </el-dialog>
    </div>
    <botloading></botloading>
  </div>
</template>

<script>
import VEmojiPicker from "v-emoji-picker";
import Goodsloading from "@/components/Goodsloading.vue";
import botloading from "@/components/botloading.vue";
import { getGoodsDetail, getCommunity, getChangeUrl } from "@/api/goods/goods";
import { applyGoods } from "@/api/userinfo/userinfo";
import { addCollection, addGoodsError } from "@/api/user/user";

export default {
  filters: {
    formatTime: function(datetime, fmt) {
      var date = new Date(datetime);
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      var o = {
        "M+": date.getMonth() + 1,
        "d+": date.getDate(),
        "h+": date.getHours(),
        "m+": date.getMinutes(),
        "s+": date.getSeconds()
      };
      for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
          var str = o[k] + "";
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length === 1 ? str : ("00" + str).substr(str.length)
          );
        }
      }
      return fmt;
    }
  },
  name: "goodsDetails",
  components: {
    Goodsloading,
    botloading,
    VEmojiPicker
  },
  data() {
    return {
      qqtpwd: "",
      qqcouponUrl: "",
      chattaokeshow: false,
      chatshow: false,
      // pack: packData,
      contentstr: "",
      qqcontentstr: "",
      tgtemplate:
        "⭕#标题#\n💖原价【#原价#】💰\n💖跟我买【#券后价#】💰\n————————\n#微信淘口令# \n⚡復製本条消息打开手机🍑寳即可",
      wxtemplate:
        "⭕#标题#\n💖原价【#原价#】💰\n💖跟我买【#券后价#】💰\n————————\n#微信淘口令# \n⚡復製本条消息打开手机🍑寳即可",
      qqtemplate:
        "#标题#\n券后【#券后价#元】包邮秒杀\n领券下单链接:#QQ二合一# \n#文案#\n本群专享优惠！已抢#总销量#件！",
      // 表情
      activeName: "1",
      showDialog: false,
      yxdialog: false,
      isimg: true,
      isurl: false,
      iswx: false,
      liveshotList: [
        // "//img.letuilm.com/2020/06/3b82b62020061111064717921.jpg",
        // "//img.letuilm.com/2020/06/bcd6e82020061111064711524.jpeg",
        // "//img.letuilm.com/2020/06/3b82b62020061111064717921.jpg",
      ], //实拍
      urlStre: "",
      errorList: [],
      options: [
        {
          value: "1",
          label: "价格不对/优惠券异常"
        },
        {
          value: "2",
          label: "佣金不对/计划取消"
        },
        {
          value: "3",
          label: "商品劣质/不发货/虚假"
        },
        {
          value: "4",
          label: "其他异常"
        },
        {
          value: "5",
          label: "榜单纠错"
        }
      ],
      form: {
        goods_id: "", //商品id
        type: "1", //纠错类型
        desc: "", //纠错描述
        err_img: "" //纠错证明
      },
      errorshow: false,
      nogoodsShow: false,
      heart: true,
      goodsInfo: {
        shop_name: "", // 店铺名称
        goods_short_title: "", //商品短标题
        copywriting: "", //推广文案
        coupon_num: "", //优惠卷数量
        goods_price: "", //商品单价
        after_coupon_price: "", //卷后单价
        coupon_collar_count: "", //优惠卷领取数量
        goods_end_time: "", //商品过期时间
        commission_than: "", //佣金比例
        goods_day_num: "", //商品月销量
        // goods_img: require("@/assets/images/goodsimg.jpg"),
        goods_img: "", //商品图片
        goods_yx_img: "", //营销图
        coupon_remnant_num: "", //剩余优惠卷数量
        goods_list: [
          // {
          //   id: 24797,
          //   goods_short_title: "信阳毛尖2020年新茶浓香野茶", //商品短名称
          //   goods_img:
          //     "https://img.alicdn.com/imgextra/i3/2206827432330/O1CN010x15oS1T5BPGJF1Tb_!!2206827432330.jpg" //商品图
          // }
        ],
        data: {
          evaluate_id: "",
          content: [
            {
              title: "宝贝描述",
              score: " ", //评分
              type: "desc",
              level: "", //高于
              levelText: "",
              levelTextColor: "#999999",
              levelBackgroundColor: "#EEEEEE",
              tmallLevelTextColor: "#999999",
              tmallLevelBackgroundColor: "#EEEEEE"
            },
            {
              title: "卖家服务",
              score: " ",
              type: "serv",
              level: "",
              levelText: "",
              levelTextColor: "#999999",
              levelBackgroundColor: "#EEEEEE",
              tmallLevelTextColor: "#999999",
              tmallLevelBackgroundColor: "#EEEEEE"
            },
            {
              title: "物流服务",
              score: "",
              type: "post",
              level: "",
              levelText: "",
              levelTextColor: "#999999",
              levelBackgroundColor: "#EEEEEE",
              tmallLevelTextColor: "#999999",
              tmallLevelBackgroundColor: "#EEEEEE"
            }
          ], // 服务评价
          good_rate_percentage: "0" //好评率
        }
      },
      dataobj: {
        evaluate_id: "",
        content: [
          {
            title: "宝贝描述",
            score: " ", //评分
            type: "desc",
            level: "", //高于
            levelText: "",
            levelTextColor: "#999999",
            levelBackgroundColor: "#EEEEEE",
            tmallLevelTextColor: "#999999",
            tmallLevelBackgroundColor: "#EEEEEE"
          },
          {
            title: "卖家服务",
            score: " ",
            type: "serv",
            level: "",
            levelText: "",
            levelTextColor: "#999999",
            levelBackgroundColor: "#EEEEEE",
            tmallLevelTextColor: "#999999",
            tmallLevelBackgroundColor: "#EEEEEE"
          },
          {
            title: "物流服务",
            score: "",
            type: "post",
            level: "",
            levelText: "",
            levelTextColor: "#999999",
            levelBackgroundColor: "#EEEEEE",
            tmallLevelTextColor: "#999999",
            tmallLevelBackgroundColor: "#EEEEEE"
          }
        ], // 服务评价
        good_rate_percentage: "0" //好评率
      },
      goods_id: "",
      user_id: "",
      dialogImageUrl: "",
      dialogVisible: false,
      // url: require("@/assets/images/goodsimg.jpg"),
      url: "",
      percentagevalue: 3.7,
      srcList: [],
      goodsList: [
        // {
        //   id: 2,
        //   url: require("@/assets/images/goodsimg.jpg"),
        //   title: "【明星同款】Champion带标 短袖T恤 经典刺秀 男女款",
        //   roll: "2056",
        //   discount: 79,
        //   commisrate: 5,
        //   commis: 20,
        //   percentage: 50,
        //   num: 55051,
        //   shopName: "淘宝旗舰店",
        //   manName: "淘客",
        //   oldPrice: 79,
        //   newPrice: 49,
        //   bondSite:
        //     "http://coupon.m.jd.com/coupons/show.action?key=2247448a47f94a3896b71ed95f654d95&roleId=30308892&to=mall.jd.com/index-979434.html",
        //   hotSite: " http://item.jd.com/54546373822.html"
        // }
      ],
      marketing_video: "",
      videoFlag: false,
      videoUploadPercent: 0,
      copywritobj: {
        goods_yx_img: "", //商品营销图
        goods_short_title: "", //商品短名称
        goods_price: "0.00", //商品原价
        after_coupon_price: "0.00", //卷后价
        coupon_url: "", // 优惠卷链接
        copywriting: "", //推广文案
        coupon_price: "0.00", //优惠卷面值
        commission_than: "0", //佣金比例
        goods_day_num: 0, //商品总销量
        today_num: 0, //今日销量
        shop_name: "", //店铺名称
        nickname: "", // 放单人昵称
        goods_name: "", //商品原名称
        friend_circle: "", //朋友圈文案
        marketing_video: "", //营销视频
        live_shooting_img: "" //商品实拍图
      }
    };
  },

  computed: {},
  created() {
    // console.log("this.$route.query.id", this.$route.query.id);
    this.goods_id = this.$route.query.id;
    this.getCommunity(this.goods_id);
    if (this.$ls.get("userinfo")) {
      this.user_id = this.$ls.get("userinfo").id;
    }
    this.getGoodsDetail(this.goods_id);
  },
  mounted() {
    // console.log(categoriesDefault);
    // console.log("Total emojis:", emojisDefault.length);
  },
  methods: {
    changeqqurl(val) {
      getChangeUrl({
        goods_id: this.goods_id
      })
        .then(res => {
          console.log(res);
          if (res.code == 200) {
            this.qqcouponUrl = res.data.coupon_click_url;
            this.qqtpwd = res.data.tpwd;
            // this.qqcouponUrl = "http://qqcouponUrl";
            // this.qqtpwd = "8JJJJJJJJJJ8";
            if (val == 1) {
              this.dosure(this.tgtemplate, 1);
            } else {
              this.dosure(this.qqtemplate, 2);
            }
            this.$message.success("转链成功!");
          } else {
            this.$message.info(res.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    showmuban() {
      this.yxdialog = true;
      this.activeName = "2";
      this.tgtemplate = this.qqtemplate;
    },
    handleClose() {
      this.chatshow = false;
    },
    // 模板转换
    dosure(tgtemplate, val, ischange) {
      // console.log(tgtemplate);
      var Content = JSON.stringify(tgtemplate);
      Content = Content.replace(/\\n/g, "<br />");
      Content = Content.replace(/#标题?#/g, this.copywritobj.goods_name);
      // Content = Content.replace(/#标题?#/g, this.copywritobj.goods_short_title);
      Content = Content.replace(/#原价?#/g, this.copywritobj.goods_price);
      Content = Content.replace(
        /#券后价?#/g,
        this.copywritobj.after_coupon_price
      );
      Content = Content.replace(/#券金额?#/g, this.copywritobj.coupon_price);
      Content = Content.replace(/#商品链接?#/g, this.goodsInfo.goods_url);
      Content = Content.replace(/#总销量?#/g, this.copywritobj.goods_day_num); //总销量
      Content = Content.replace(/#今日销量?#/g, this.copywritobj.today_num); //今日销量
      Content = Content.replace(/#文案?#/g, this.copywritobj.copywriting); //推广文案
      Content = Content.replace(
        /#佣金比例?#/g,
        this.copywritobj.commission_than + "%"
      ); //佣金比例
      Content = Content.replace(/#店铺名称?#/g, this.copywritobj.shop_name); //店铺名称
      Content = Content.replace(/#放单人昵称?#/g, this.copywritobj.nickname); //放单人昵称
      Content = Content.replace(
        /#领券链接?#/g,
        this.qqcouponUrl == ""
          ? "<span style='color:red'>#领券链接#(请先转链)</span>"
          : this.qqcouponUrl
      );
      Content = Content.replace(
        /#QQ二合一?#/g,
        this.qqtpwd == ""
          ? "<span style='color:red'>#QQ二合一#(请先转链)</span>"
          : this.qqcouponUrl + "</br>" + "淘口令:" + this.qqtpwd
      ); //QQ二合一
      Content = Content.replace(
        /#微信淘口令?#/g,
        this.qqtpwd == ""
          ? "<span style='color:red'>#微信淘口令#(请先转链)</span>"
          : this.qqtpwd
      ); //微信淘口令
      // Content = Content.replace(/#QQ淘口令?#/g, this.qqtpwd); //QQ淘口令
      // Content = Content.replace(/#快站?#/g, "#快站#"); //快站
      // console.log(Content);
      if (val == 1) {
        this.contentstr = Content;
      }
      if (val == 2) {
        this.qqcontentstr = Content;
      }
      if (ischange == 3) {
        if (val == 1) {
          this.wxtemplate = this.tgtemplate;
        }
        if (val == 2) {
          this.qqtemplate = this.tgtemplate;
        }
      }
      this.yxdialog = false;
    },
    handleClick() {
      console.log(this.activeName);
      if (this.activeName == 1) {
        this.tgtemplate = this.wxtemplate;
      } else {
        this.tgtemplate = this.qqtemplate;
      }
    },
    handleClose2() {
      this.yxdialog = false;
    },
    // 表情
    selectEmoji(emoji) {
      var elInput = document.getElementById("emojiInput");
      // console.log(elInput);
      //根据id选择器选中对象
      var startPos = elInput.selectionStart; // input 第0个字符到选中的字符
      var endPos = elInput.selectionEnd; // 选中的字符到最后的字符
      // console.log(startPos, " --- ", endPos);
      if (startPos === undefined || endPos === undefined) return;
      var txt = elInput.value;
      // 将表情添加到选中的光标位置
      var result =
        txt.substring(0, startPos) + emoji.data + txt.substring(endPos);
      elInput.value = result; // 赋值给input的value
      // 重新定义光标位置
      elInput.focus();
      elInput.selectionStart = startPos + emoji.data.length;
      elInput.selectionEnd = startPos + emoji.data.length;
      this.tgtemplate = result; // 赋值
    },
    toogleDialogEmoji() {
      this.showDialog = !this.showDialog;
    },
    //社群文案信息
    getCommunity(goods_id) {
      getCommunity({
        goods_id: goods_id
      })
        .then(res => {
          if (res.code == 200) {
            console.log("社群文案返回", res);
            this.copywritobj = res.data;
            // this.liveshotList.push(
            //   "img.letuilm.com/111111111sdasdasdsadasdsadsadsaasssdsads2020/06/3b82b62020061315185241949.jpg"
            // );
            if (res.data.live_shooting_img !== null) {
              this.liveshotList = res.data.live_shooting_img.split(",");
              // var arr2 = res.data.live_shooting_img.split(",");
              // for (var i = 0; i < arr2.length; i++) {
              //   this.liveshotList.push(arr2[i].slice(5));
              // }
              console.log(this.liveshotList);
            }
            this.dosure(this.tgtemplate, 1);
            this.dosure(this.qqtemplate, 2);
          } else {
            this.$message.info(res.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //   上传视频
    handleVideoSuccess(res, file) {
      //获取上传图片地址
      console.log(file);
      console.log("视频返回", res);
      this.videoFlag = false;
      // this.videoUploadPercent = 0;
      // if (res.status == 200) {
      // console.log(res.substring(0, 120));
      // const url = JSON.parse(res.substring(0, 119)).data.url;
      const url = res.data.url;
      console.log("返回", url);
      this.marketing_video = url;
      // this.videoForm.videoUploadId = res.data.uploadId;
      // } else {
      //   this.$message.error("视频上传失败，请重新上传！");
      // }
    },
    beforeUploadVideo(file) {
      const isLt10M = file.size / 1024 / 1024 < 20;
      if (
        [
          "video/mp4"
          //   "video/ogg",
          //   "video/flv",
          //   "video/avi",
          //   "video/wmv",
          //   "video/rmvb"
        ].indexOf(file.type) == -1
      ) {
        this.$message.error("请上传正确的视频格式");
        return false;
      }
      if (!isLt10M) {
        this.$message.error("上传视频大小不能超过20MB哦!");
        return false;
      }
    },
    uploadVideoProcess(event, file, fileList) {
      console.log(fileList);
      this.videoFlag = true;
      this.videoUploadPercent = file.percentage;
    },
    // 实拍图上传
    handleAvatarSuccess3(res, file, fileList) {
      console.log("实拍图返回", res, file.raw);
      console.log("实拍图fileList", fileList);
      // this.urlStr = "";
      if (fileList.length > 0) {
        this.liveshotList = [];
        for (var i = 0; i < fileList.length; i++) {
          // this.urlStr += fileList[i].response.data.url + ",";
          if (fileList[i].response !== "") {
            console.log("//" + fileList[i].response.data.url);
            this.liveshotList.push("//" + fileList[i].response.data.url);
          }
        }
      }
    },
    dosumbit() {
      this.form.goods_id = parseInt(this.goods_id);
      console.log(this.form);
      //新增纠错
      addGoodsError({
        ...this.form
      })
        .then(res => {
          if (res.code == 200) {
            console.log("纠错返回", res);
            this.$message.success("纠错成功!");
            this.form = this.$options.data().form;
            this.errorshow = false;
          } else {
            this.$message.info(res.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    beforeAvatarUpload(file) {
      console.log(file.type);
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 1;

      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG,PNG格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 1MB!");
      }
      return isJPG && isLt2M;
    },
    // 纠错
    handleAvatarSuccess2(res, file, fileList) {
      console.log("纠错图", res, file.raw);
      console.log("返回fileList", fileList);
      this.urlStre = "";
      if (fileList.length > 0) {
        this.errorList = [];
        for (var i = 0; i < fileList.length; i++) {
          // this.ruleForm.relevant_img;
          if (fileList[i].response !== "") {
            this.urlStre += fileList[i].response.data.url + ",";
            this.errorList.push("http://" + fileList[i].response.data.url);
          }
        }
      }
      this.urlStre = this.urlStre.substring(0, this.urlStre.length - 1);
      this.form.err_img = this.urlStre;
      console.log("纠错字符串", this.urlStre);
      console.log("纠错列表", this.errorList);
    },
    handleRemove2(file, fileList) {
      console.log("纠错", file);
      console.log("纠错List", fileList);
      this.urlStre = "";
      if (fileList.length > 0) {
        for (var i = 0; i < fileList.length; i++) {
          // this.ruleForm.relevant_img;
          this.urlStre += fileList[i].response.data.url + ",";
        }
      }
      this.urlStre = this.urlStre.substring(0, this.urlStre.length - 1);
      console.log("纠错urlStre", this.urlStre);
    },
    showerrorbox() {
      this.errorshow = true;
    },
    //加入收藏
    addCollection(goods_id) {
      console.log(goods_id);
      addCollection({
        goods_id: goods_id
      })
        .then(res => {
          if (res.code == 200) {
            console.log("返回", res);
            this.$message.success("收藏成功!");
          } else {
            this.$message.info(res.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    joincollect() {
      console.log(this.$refs.heart.style);
      this.$refs.heart.style.backgroundPositionY = "-59px";
      this.addCollection(this.goods_id);
    },
    handleOk2(val) {
      // console.log(val);
      this.$nextTick(function() {
        //nextTick,当前dom渲染完毕的回调
        const selection = window.getSelection();
        const range = document.createRange();
        console.log(document.getElementById(val));
        range.selectNode(document.getElementById(val)); //传入dom
        selection.addRange(range);
        document.execCommand("copy");
        // this.$message.success("复制成功");
        selection.removeAllRanges();
      });
    },
    handleOk(val) {
      console.log(val);
      this.$nextTick(function() {
        //nextTick,当前dom渲染完毕的回调
        const selection = window.getSelection();
        const range = document.createRange();
        console.log(document.getElementById(val));
        range.selectNode(document.getElementById(val)); //传入dom
        selection.addRange(range);
        document.execCommand("copy");
        this.$message.success("复制成功");
        selection.removeAllRanges();
      });
    },
    applyGoods() {
      if (this.user_id !== "") {
        applyGoods({
          user_id: this.user_id,
          goods_id: this.goods_id
        })
          .then(res => {
            console.log(res);
            if (res.code === 200) {
              this.$message.success(res.msg);
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        this.$message.info("请先登录获取推广权限!");
      }
    },
    getGoodsDetail(id) {
      console.log("id", id);
      getGoodsDetail({
        goods_id: id
        // goods_id: "55835"
      })
        .then(res => {
          console.log("商品详情", res.data);
          this.goodsInfo = res.data;
          if (res.data.data !== null) {
            var content = res.data.data.content;
            // console.log("content", typeof content);
            var arr = JSON.parse(content);
            this.goodsInfo.data.content = arr;
            // console.log("arr", arr);
            this.goodsInfo.data.good_rate_percentage =
              res.data.data.good_rate_percentage;
          }
          if (res.data.data == null) {
            this.goodsInfo.data = this.dataobj;
          }
          this.goodsInfo.goods_end_time = parseInt(
            res.data.goods_end_time.toString() + "000"
          );
          // console.log("end_time", this.goodsInfo.goods_end_time);
          this.goodsInfo.commission_rate_percent = parseInt(
            res.data.goods_price * (res.data.commission_than / 100).toFixed(2)
          );
          this.goodsList = res.data.goods_list;
          if (this.goodsList.length == 0) {
            this.nogoodsShow = true;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    godetails(id) {
      // this.$router.push({
      //   path: "/optimGoods/goodsDetails",
      //   query: {
      //     id: id
      //   }
      // });
      this.getGoodsDetail(id);
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
};
</script>

<style lang="less" scoped>
/*定义动画效果_css3*/
@keyframes landr {
  0% {
    transform: rotate(0deg);
    transform-origin: right bottom 0;
  }
  39% {
    transform: rotate(5deg);
    transform-origin: right bottom 0;
  }
  40% {
    transform: rotate(5deg);
    transform-origin: left bottom 0;
  }
  75% {
    transform: rotate(-10deg);
    transform-origin: left bottom 0;
  }
  100% {
    transform: rotate(0deg);
    transform-origin: left bottom 0;
  }
}
@-webkit-keyframes landr {
  0% {
    -webkit-transform: rotate(0deg);
    -webkit-transform-origin: right bottom 0;
  }
  39% {
    -webkit-transform: rotate(5deg);
    webkit-transform-origin: right bottom 0;
  }
  40% {
    -webkit-transform: rotate(5deg);
    -webkit-transform-origin: left bottom 0;
  }
  75% {
    -webkit-transform: rotate(-10deg);
    -webkit-transform-origin: left bottom 0;
  }
  100% {
    -webkit-transform: rotate(0deg);
    -webkit-transform-origin: left bottom 0;
  }
}
.chatrecord::v-deep {
  .el-divider {
    margin: 1px 0;
  }
  .chatbox1 {
    .friendbox {
      cursor: pointer;
      height: 120px;
    }
    .friendbox:hover {
      background-color: #b2b2b2cc;
    }
    .tgbox {
      cursor: pointer;
    }
    .tgbox:hover {
      background-color: #b2b2b2cc;
    }
    .imgs_box {
      cursor: pointer;
      position: relative;
      .el-button {
        background-color: #409eff;
        position: absolute;
        top: 0;
        right: 0;
      }
      button {
        // width: 100%;
        background-color: #fff;
      }
      button:hover {
        background-color: #b2b2b2cc;
      }
    }
  }
}
.chatrecord2::v-deep {
  .el-divider {
    margin: 1px 0;
  }
  // .chattaoke {
  //   // text-align: left;
  // }
  .infocard {
    text-align: left;
    .el-divider {
      margin: 1px 0;
      height: 2em;
    }
  }
  .infocard:hover {
    background-color: #b2b2b2cc;
  }
  button {
    text-align: left;
    background-color: #fff;
    cursor: pointer;
  }
  button:focus {
    outline: none;
  }
  button:hover {
    background-color: #b2b2b2cc;
  }
}
button {
  cursor: pointer;
}
button:focus {
  outline: none;
}
.copybotn {
  border-radius: 12px;
  cursor: pointer;
  border: 0px;
  background-color: transparent;
  border-style: none;
  .copybotnbox {
    width: 280px;
    height: 280px;
    background-color: #fff9f1;
    border-radius: 10px;
    text-align: left;
    overflow-y: auto;
  }
  .copybotnbox2 {
    width: 280px;
    height: 100px;
    background-color: #fff9f1;
    border-radius: 10px;
    text-align: left;
    overflow-y: auto;
  }
}
.copybotn:focus {
  outline: none;
}
.copybotn:hover {
  background-color: #b9fff9;
}
.copybotn:active {
  border-style: none;
}
.yxdialog::v-deep {
  .el-dialog__header {
    background-color: #f4f5f7;
  }
  .el-dialog__body {
    background-color: #f4f5f7;
    padding: 18px 20px;
  }
  .el-dialog__footer {
    background-color: #f4f5f7;
  }
}
.yx_box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background-color: #f4f5f7;
  .yxbox_left {
    width: 480px;
    .disflex1 {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-left: 15px;
      margin-right: 15px;
    }
    .yx_state {
      text-align: left;
      .yx_title {
        height: 20px;
        line-height: 20px;
        font-size: 20px;
        padding: 0 11px;
        margin-bottom: 10px;
        color: #218acb;
      }
      .yx_span {
        color: #ff7800;
        padding: 0 3px;
      }
    }
    .yxlabel_box {
      text-align: left;
      .yx_label {
        margin-top: 20px;
        height: 14px;
        line-height: 14px;
        padding: 0 11px;
        margin-bottom: 10px;
        font-size: 16px;
        color: #218acb;
        border-left: 4px solid #218acb;
      }
      .yxinfo {
        width: 160px;
        height: 22px;
        line-height: 20px;
        overflow: hidden;
        color: #999;
        user-select: none;
      }
      .yxlook {
        width: 90px;
        height: 20px;
        height: 22px;
        line-height: 20px;
        overflow: hidden;
        color: #999;
        user-select: none;
      }
    }
  }
  .yxbox_right {
    width: 295px;
    .yxbox_rmain::v-deep {
      height: 444px;
      .el-tabs__nav {
        margin-left: 68px;
      }
      .el-tabs__header {
        margin-bottom: 1px;
      }
      .textarea_r {
        position: relative;
        .el-textarea {
          .el-textarea__inner {
            font-family: auto !important;
          }
        }
      }
    }
  }
}

#exampleInputEmoji::v-deep {
  position: absolute;
  bottom: 1px;
  right: 1px;
  #EmojiPicker {
    position: absolute;
    z-index: 10000;
    top: -357px;
    left: 40px;
  }
  #InputSearch {
    display: none !important;
  }
}
p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.goods_bot {
  position: relative;
  .hover_box2 {
    position: relative;
    width: 243px;
    border-radius: 12px;
    margin-bottom: 20px;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    flex-wrap: wrap;
    .topimg2 {
      position: absolute;
      top: -8px;
      left: 20px;
      z-index: 2;
    }
    .top_num2 {
      position: absolute;
      top: 18px;
      left: 43px;
      font-size: 23px;
      color: #ffffff;
      z-index: 3;
    }
    // .elimg2 {
    //   width: 220px;
    //   // height: 220px;
    // }
    .top_main2 {
      background-color: #fff;
      // height: 220px;
      // display: flex;
      // justify-content: space-around;
      // align-items: center;
      .top_right2 {
        padding-top: 10px;
        // width: 220px;
        font-size: 13px;
        margin: 0 auto;
        padding-bottom: 20px;
        .top_title2 {
          width: 200px;
          height: 16px;
          margin: 3px auto;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          padding-top: 8px;
          padding-bottom: 8px;
          a {
            margin-left: 8px;
            margin-right: 8px;
            font-size: 14px;
            text-decoration: none;
          }
        }
        .top_roll2 {
          padding-top: 8px;
          padding-bottom: 8px;
          width: 150px;
          height: 25px;
          line-height: 25px;
          border-radius: 8px;
          margin: 0 auto;
          background-color: rgba(148, 144, 144, 0.1);
          span {
            font-size: 16px;
            margin-left: 5px;
            margin-right: 5px;
            color: #ff4215;
            font-weight: bold;
          }
        }
        .top_data2 {
          height: 70px;
          font-size: 13px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          p {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
          }
          p:first-child {
            color: #333;
            font-size: 16px;
            font-weight: bold;
          }
        }
      }
    }
    .shops_Box2 {
      // width: 100%;
      .shops_action2 {
        position: absolute;
        top: 220px;
        left: 13px;
        z-index: -11;
        opacity: 0;
        transition: all 1s initial;
        .action_box2 {
          width: 217px;
          display: flex;
          // justify-content: space-betwe;
          align-items: center;
          .join_collect2 {
            background-color: #fb522b;
            overflow: hidden;
            border-top-left-radius: 10px;
            .join_btn12 {
              background-color: #fb522b;
              border: none;
              margin: 0 auto;
              .iconimg12 {
                display: inline-block;
                width: 17px;
                height: 15px;
                overflow: hidden;
                margin-left: -8px;
                background: url("~@/assets/images/icon_a.png");
                background-position: 37px -1px;
                // object-fit: cover;
                transform: scale(1);
                transition: all 0.3s initial;
              }
            }
          }
          .join_collect2:hover {
            span {
              color: #ff9;
            }
            .iconimg12 {
              // transform: translate(1px);
              // transform: scale(1.3);
              animation: landr 0.8s ease-in-out;
            }
          }
          .copy2 {
            background-color: rgb(255, 129, 48);
            overflow: hidden;
            border-top-right-radius: 10px;
            .join_btn22 {
              background-color: rgb(255, 129, 48);
              border: none;
              .iconimg22 {
                display: inline-block;
                width: 17px;
                height: 15px;
                overflow: hidden;
                margin-left: -8px;
                background: url("~@/assets/images/icon_a.png");
                background-position: 39px -22px;
                // object-fit: cover;
                transform: scale(1);
                // transition: all 0.3s initial;
              }
            }
          }
          .position_hover {
            display: none;
            position: absolute;
            top: -100px;
            left: 225px;
            width: 300px;
            text-align: left;
            // word-break: keep-all;
            // white-space: nowrap;
            font-size: 12px;
            opacity: 0;
            z-index: -999;
            .elimghover {
              width: 80px;
            }
          }
          .copy2:hover + .position_hover {
            display: block;
            opacity: 1;
            z-index: 999999;
          }
          .copy2:hover {
            span {
              color: #ff9;
            }
            .iconimg22 {
              // transform: translateX(1px), translatey(1px);
              // transform: scale(1.3);
              animation: landr 0.8s ease-in-out;
            }
          }
        }
      }
      .shops_info22 {
        position: absolute;
        top: 370px;
        left: 12px;
        width: 217px;
        height: 70px;
        font-size: 12px;
        background-color: #fff;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        z-index: -1;
        border-bottom: 1px solid #ebeef5;
        border-left: 1px solid #ebeef5;
        border-right: 1px solid #ebeef5;
        transition: all 1s initial;
        padding-bottom: 12px;
        display: flex;
        align-items: center;
        div {
          width: 100%;
          padding-top: 5px;
        }
      }
    }
  }
  .hover_box2:hover {
    .shops_Box2 {
      .shops_action2 {
        transition: all 300ms ease;
        -moz-transition: all 300ms ease;
        -webkit-transition: all 300ms ease;
        top: 180px;
        opacity: 1;
        z-index: 6;
      }
      .shops_info22 {
        transition: all 300ms ease;
        -moz-transition: all 300ms ease;
        -webkit-transition: all 300ms ease;
        top: 449px;
        opacity: 1;
        z-index: 5;
      }
    }
  }
}
/* 公共样式 */
// 优惠卷
.coupon_Box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 25px;
  line-height: 25px;
  margin-bottom: 10px;
  .coupon_img {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 65px;
    height: 25px;
    background: url("~@/assets/images/sale_box.png") no-repeat center;
    color: white;
  }
}
.disflex {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 10px;
  text-align: left;
  .childone {
    display: inline-block;
    width: 150px !important;
  }
  .childtwo {
    text-align: right;
    white-space: nowrap;
  }
}
.goodsDetails {
  width: 100%;
  .goodsdeta_main {
    width: 1200px;
    margin: 0 auto;
    /deep/.el-card {
      border: none;
      border-radius: 10px;
    }
    .show_Box {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      position: relative;
      .error_box {
        cursor: pointer;
        position: absolute;
        top: -20px;
        right: -15px;
        color: #ff8e7f;
      }
      .showgoods::v-deep {
        // width: 600px;
        width: 40%;
        border-radius: 12px;
        // .el-carousel__indicator.el-carousel__indicator--horizontal {
        //   background-color: rgb(226, 30, 30);
        //   height: 50px;
        //   line-height: 50px;
        //   margin: 0 auto;
        // }
        // .el-carousel__item:nth-child(2n) {
        //   background-color: rgb(226, 30, 30);
        // }

        // .el-carousel__item:nth-child(2n + 1) {
        //   background-color: rgb(66, 30, 226);
        // }
      }
      .goods_right {
        width: 60%;
        padding: 20px;
        text-align: left;
        padding-top: 0;
        padding-bottom: 0;
        .goods_title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .title_left {
            display: flex;
            justify-content: space-between;
            align-items: center;
            a {
              color: rgb(0, 0, 0);
              text-decoration: none;
              background-color: transparent;
              outline: none !important;
              font-weight: bold;
              font-size: 18px;
            }
          }
          .pop {
            display: inline-block;
            font-size: 12px;
            width: 70px;
            height: 19px;
            color: white;
            text-align: center;
            border-radius: 10px;
            border-bottom-left-radius: 0;
            background: linear-gradient(
              135deg,
              rgba(255, 100, 68, 1),
              rgba(255, 150, 48, 1)
            );
          }
        }
        .goods_info {
          color: rgb(255, 0, 0);
          margin-top: 5px;
          height: 42px;
          line-height: 42px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          box-sizing: border-box;
        }
        .juan_Box {
          position: relative;
          background-color: #fafbfc;
          border-radius: 10px;
          .juannum {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            height: 53px;
            margin-top: 10px;
            text-align: center;
            line-height: 54px;
            font-size: 18px;
            color: white;
            background: url("~@/assets/images/th_blue.png") no-repeat center;
            background-position: 100%;
            .geted {
              width: 200px;
              height: 48px;
              background: url("~@/assets/images/th_orange.png") no-repeat center;
              background-position: 100%;
            }
          }
          .top_data {
            display: flex;
            justify-content: space-around;
            align-items: center;
            text-align: center;
            p {
              margin: 0;
            }
            .data_box {
              padding-top: 40px;
              padding-bottom: 40px;
              .data_top {
                font-size: 28px;
                color: #ff4215;
                font-weight: bold;
                box-sizing: border-box;
                .round_btn {
                  padding: 4px 10px !important;
                  text-align: center;
                  line-height: 10px;
                  color: white;
                  background: linear-gradient(
                    90deg,
                    rgba(91, 163, 255, 1),
                    rgba(109, 112, 255, 1)
                  );
                }
              }
              .data_main {
                color: #999;
                font-size: 14px;
                line-height: 1.2;
              }
              .data_bot {
                font-size: 14px;
                color: #333;
                margin-top: 5px;
              }
            }
          }
          .goods_evaluate {
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding-bottom: 15px;
            .round_btn {
              padding: 4px 10px !important;
              text-align: center;
              line-height: 10px;
              color: white;
              font-weight: bold;
              background: linear-gradient(
                90deg,
                rgba(91, 163, 255, 1),
                rgba(109, 112, 255, 1)
              );
            }
            .top_data2 {
              width: 340px;
              display: flex;
              justify-content: space-around;
              align-items: center;
              text-align: center;
              p {
                margin: 0;
              }
              .data_box2 {
                .data_top2 {
                  font-size: 20px;
                  color: #000000;
                  font-weight: bold;
                  box-sizing: border-box;
                  .round_btn2 {
                    padding: 4px 10px !important;
                    text-align: center;
                    line-height: 10px;
                    color: white;
                    background: linear-gradient(
                      90deg,
                      rgba(91, 163, 255, 1),
                      rgba(109, 112, 255, 1)
                    );
                  }
                }
                .data_bot2 {
                  font-size: 14px;
                  color: #333;
                  margin-top: 5px;
                }
              }
            }
          }
        }
        .shops_box {
          height: 45px;
          background-color: #fafbfc;
          padding: 0 10px;
          margin: 10px 0px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          .shops_left {
            width: 180px;
            margin-right: 20px;
            margin-bottom: 5px;
            font-size: 16px;
            font-weight: bold;
          }
          .shops_right {
            width: 350px;
            display: flex;
            justify-content: space-around;
            align-items: flex-start;
            .item_evaluate {
              line-height: 20px;
              font-size: 14px;
              font-family: "DIN-Medium";
              span {
                color: #ff4215;
              }
              .titem_itle {
                color: hsl(0, 0%, 40%);
              }
            }
          }
        }
        .btns {
          padding-top: 27px;
          position: relative;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .copy_btn2 {
            border-radius: 13px;
            font-size: 16px;
            padding: 13px 17px !important;
            background: linear-gradient(
              90deg,
              rgba(87, 148, 255, 1),
              rgba(107, 102, 255, 1)
            );
            transition: all 300ms ease;
            .iconplus {
              display: inline-block;
              width: 20px;
              height: 20px;
              background: url("~@/assets/images/btn_icon.png") no-repeat;
              background-position: 0px 0px;
            }
          }
          .position_hover2 {
            display: none;
            position: absolute;
            top: -97px;
            left: 154px;
            width: 220px;
            text-align: left;
            // word-break: keep-all;
            // white-space: nowrap;
            font-size: 12px;
            opacity: 0;
            z-index: 999;
            .elimghover {
              width: 80px;
            }
          }
          // .copy_btn2:hover + .position_hover2 {
          //   display: block;
          //   opacity: 1;
          //   z-index: 999999;
          // }
          .copy_btn2:hover {
            transform: translateY(-5px);
            background: linear-gradient(
              90deg,
              rgba(107, 102, 255, 1),
              rgba(87, 148, 255, 1)
            );
            .iconplus {
              animation: landr 0.8s ease-in-out;
            }
          }
          .look_info2::v-deep {
            border-radius: 13px;
            font-size: 16px;
            padding: 13px 17px !important;
            color: blue;
            transition: all 300ms ease;
            .iconright {
              display: inline-block;
              width: 20px;
              height: 20px;
              background: url("~@/assets/images/btn_icon.png") no-repeat;
              background-position: 0px -18px;
            }
          }
          .look_info2:hover {
            transform: translateY(-5px);
            box-sizing: border-box;
            border: 1px solid blue;
            .iconright {
              animation: landr 0.8s ease-in-out;
            }
          }
          .collect_btn2 {
            border-radius: 13px;
            font-size: 16px;
            padding: 13px 17px !important;
            color: #ff4215;
            transition: all 300ms ease;
            .heart {
              display: inline-block;
              width: 20px;
              height: 20px;
              background: url("~@/assets/images/btn_icon.png") no-repeat;
              background-position: 0px -39px;
            }
          }
          .collect_btn2:hover {
            transform: translateY(-5px);
            box-sizing: border-box;
            border: 1px solid #ff4215;
            .heart {
              animation: landr 0.8s ease-in-out;
              // background-position: 0px -37px;
            }
          }
        }
      }
    }
    .source {
      width: 100%;
      height: 130px;
      margin: 20px 0 0;
      padding: 30px 40px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      text-align: center;
      box-sizing: border-box;
      .source_left {
        width: 700px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        text-align: center;
        .head_photo {
          width: 68px;
          height: 68px;
          // overflow: hidden;
          border: 1px solid #000;
          border-radius: 50%;
        }
        .user_info {
          text-align: left;
          .user_name {
            color: #333;
            transition: all 300ms ease;
          }
          .aect {
            text-align: center;
            transition: all 300ms ease;
            font-weight: bold;
            color: #ffcb6b;
            font-size: 12px;
            -moz-border-radius: 0 24px 24px 24px;
            -webkit-border-radius: 0 24px 24px 24px;
            border-radius: 0 24px 24px 24px;
            line-height: 24px;
            padding: 0 15px 0 8px;
            display: inline-block !important;
            vertical-align: middle;
            background: linear-gradient(
              90deg,
              rgba(73, 63, 48, 1),
              rgba(45, 41, 37, 1)
            );
            .aect_img {
              background: url("~@/assets/images/icon_s.png") no-repeat;
              width: 20px;
              height: 20px;
              background-position: 0 -100px;
              display: inline-block;
              vertical-align: middle;
              font-size: 0;
              overflow: hidden;
              background-repeat: no-repeat;
            }
          }
          .aect:hover {
            .aect_img {
              animation: landr 0.8s ease-in-out;
            }
          }
          .team {
            color: #fff;
            font-size: 12px;
            font-weight: bold;
            -moz-border-radius: 0 24px 24px 24px;
            -webkit-border-radius: 0 24px 24px 24px;
            border-radius: 0 24px 24px 24px;
            line-height: 24px;
            padding: 0 15px 0 8px;
            display: inline-block !important;
            vertical-align: middle;
            -moz-border-radius: 0 24px 24px 24px;
            -webkit-border-radius: 0 24px 24px 24px;
            border-radius: 0 24px 24px 24px;
            line-height: 24px;
            padding: 0 15px 0 8px;
            background: linear-gradient(
              90deg,
              rgba(94, 103, 177, 1),
              rgba(77, 87, 167, 1)
            );
            .team_img {
              background: url("~@/assets/images/icon_s.png") no-repeat;
              width: 20px;
              height: 20px;
              background-position: 0 -120px;
              display: inline-block;
              vertical-align: middle;
              font-size: 0;
              overflow: hidden;
              background-repeat: no-repeat;
            }
          }
          .team:hover {
            .team_img {
              animation: landr 0.8s ease-in-out;
            }
          }
        }
        .top_data2 {
          width: 330px;
          height: 70px;
          font-size: 13px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          p {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
          }
          .data_box2 {
            .data_top2 {
              font-size: 24px;
              color: #000000;
              font-weight: bold;
              box-sizing: border-box;
              .round_btn2 {
                padding: 4px 10px !important;
                text-align: center;
                line-height: 10px;
                color: white;
                background: linear-gradient(
                  90deg,
                  rgba(91, 163, 255, 1),
                  rgba(109, 112, 255, 1)
                );
              }
            }
            .data_bot2 {
              font-size: 14px;
              color: #333;
              margin-top: 5px;
            }
          }
        }
      }
      .showurl {
        img {
          border-radius: 5px;
          width: 50px;
          height: 50px;
          margin-right: 5px;
          transition: all 300ms ease;
        }
        img:hover {
          transform: translateY(-5px);
        }
      }
      .jiantou {
        background: url("~@/assets/images/btn_s.png") no-repeat;
        font-size: 0;
        width: 20px;
        height: 50px;
        background-repeat: no-repeat;
        background-position: right -5px;
        display: inline-block !important;
        line-height: 50px;
        cursor: pointer;
        transition: all 300ms ease;
      }
      .jiantou:hover {
        color: #5086ff;
        background-position: right -65px;
      }
    }
    .copyimg {
      display: flex;
      justify-content: space-between;
      align-items: center;
      img {
        border-radius: 10px;
        width: 100px;
        height: 100px;
        margin-right: 5px;
        transition: all 300ms ease;
      }
      img:hover {
        transform: translateY(-5px);
      }
      .showevaluate {
        display: inline-block;
        margin-right: 10px;
        position: relative;
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: vertical;
        flex-direction: column;
        -webkit-justify-content: center;
        justify-content: center;
        text-align: center;
        width: 60px;
        height: 110px;
        line-height: 1.1;
        font-size: 16px;
        color: white;
        background: url("~@/assets/images/showre.png") no-repeat;
        background-size: cover;
        cursor: pointer;
        span {
          padding: 5px 4px 5px 30px;
        }
      }
    }
    .box_card {
      .card_imgg {
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
      .card_main {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        .copywrit_left {
          width: 342px;
          .imgbox {
            margin-top: 10px;
            img {
              width: 100px;
              height: 100px;
              border-radius: 12px;
              transition: all 300ms ease;
              margin-right: 10px;
            }
            img:hover {
              transform: translateY(-5px);
            }
          }
          .copyleft_header {
            height: 142px;
            cursor: pointer;
            width: 100%;
            // height: 110px;
            background-color: #f7f7f7;
            .write_box::v-deep {
              cursor: pointer;
              text-align: left;
              width: 200px;
              font-size: 13px;
              text-align: left;
              height: 106px;
              margin-bottom: 11px;
              margin-left: 0px;
              margin: 0 auto;
              background-color: #fff;
              color: rgb(178, 178, 178);
              .el-divider {
                margin: 2px 0;
              }
              .write_info {
                padding-top: 10px;
                margin-left: 15px;
                background-color: #fff;
                .username {
                  text-align: left;
                  margin-top: 3px;
                  font-size: 14px;
                  color: rgb(0, 0, 0);
                }
                .userask {
                  font-size: 13px;
                  margin-top: 5px;

                  p {
                    margin-top: 3px;
                  }
                  .useraskinfo {
                    display: inline-block;
                    width: 61px;
                    white-space: nowrap;
                    overflow: hidden;
                  }
                }
              }
            }
          }
          .copyleft_top {
            width: 100%;
            .liveshot::v-deep {
              // height: 180px;
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              align-items: flex-start;
              .avatar-uploader {
                margin-left: 10px;
              }
              .avatar-uploader .el-upload {
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
              }
              .avatar-uploader .el-upload:hover {
                border-color: #409eff;
              }
              .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
              }
            }
          }
          .copyleft_bot::v-deep {
            width: 100%;
            height: 196px;
            .videobox {
              width: 332px !important;
              height: 225px !important;
              .el-upload--text {
                width: 100%;
                font-size: 30px;
                color: #8c939d;
                width: 100%;
                height: 100%;
                line-height: 225px;
                text-align: center;
              }
            }
          }
        }
        // .copywrit_right {
        //   display: flex;
        //   justify-content: space-between;
        //   align-items: center;
        .copywrit_preview {
          height: 560px;
          display: block;
          margin-left: 30px;
          border-radius: 10px;
          border: 1px solid #ff6b40;
          background-color: #fff;
          padding: 0 20px 20px 20px;
          .th_i {
            background: url("~@/assets/images/th_s.png") no-repeat;
            width: 190px;
            height: 30px;
            color: #fff;
            line-height: 30px;
            background-repeat: no-repeat;
            display: inline-block;
            vertical-align: top;
          }
          .th_main {
            width: 300px;
            height: 435px;
            white-space: pre-wrap;
            white-space: -moz-pre-wrap;
            white-space: -pre-wrap;
            white-space: -o-pre-wrap;
            word-wrap: break-word;
            display: block;
            overflow-x: hidden;
            overflow-y: scroll;
          }
          .copywrit1 {
            font-size: 16px;
            line-height: 31px;
            padding: 4px 24px;
            text-align: center;
            background: linear-gradient(90deg, #ff6841, #ff9132);
            transition: all 300ms ease;
            .copywritimg1 {
              width: 30px;
              height: 30px;
              background: url("~@/assets/images/btn_icon_b.png") no-repeat;
              display: inline-block;
              vertical-align: middle;
              font-size: 0;
              overflow: hidden;
              background-repeat: no-repeat;
              margin-right: 5px;
            }
          }
          .copywrit1:hover {
            color: #fff;
            transform: translateY(-5px);
            .copywritimg1 {
              animation: landr 0.8s ease-in-out;
            }
          }
        }
        .copywrit_custom {
          height: 560px;
          display: block;
          margin-left: 30px;
          border-radius: 10px;
          border: 1px solid #5d89ff;
          background-color: #fff;
          padding: 0 20px 20px 20px;
          .th_i {
            background: url("~@/assets/images/th_s.png") no-repeat;
            width: 190px;
            height: 30px;
            color: #fff;
            line-height: 30px;
            background-repeat: no-repeat;
            display: inline-block;
            vertical-align: top;
            background-position: 0 -30px;
          }
          .th_main {
            width: 300px;
            height: 500px;
            white-space: pre-wrap;
            white-space: -moz-pre-wrap;
            white-space: -pre-wrap;
            white-space: -o-pre-wrap;
            word-wrap: break-word;
            display: block;
            overflow-x: hidden;
            overflow-y: scroll;
          }
          .copywrit1.act {
            font-size: 16px;
            line-height: 31px;
            padding: 4px 24px;
            text-align: center;
            background: linear-gradient(
              90deg,
              rgba(91, 140, 255, 1),
              rgba(107, 102, 255, 1)
            );
            transition: all 300ms ease;
            .copywritimg2 {
              width: 30px;
              height: 30px;
              background: url("~@/assets/images/btn_icon_b.png") no-repeat;
              display: inline-block;
              vertical-align: middle;
              font-size: 0;
              overflow: hidden;
              background-repeat: no-repeat;
              margin-right: 5px;
              background-position: 0 -30px;
            }
          }
          .copywrit1.act:hover {
            color: #fff;
            transform: translateY(-5px);
            .copywritimg2 {
              animation: landr 0.8s ease-in-out;
            }
          }
          .copywrit1 {
            font-size: 16px;
            line-height: 31px;
            padding: 4px 24px;
            text-align: center;
            background: linear-gradient(90deg, #ff6841, #ff9132);
            transition: all 300ms ease;
            .copywritimg1 {
              width: 30px;
              height: 30px;
              background: url("~@/assets/images/btn_icon_b.png") no-repeat;
              display: inline-block;
              vertical-align: middle;
              font-size: 0;
              overflow: hidden;
              background-repeat: no-repeat;
              margin-right: 5px;
            }
          }
          .copywrit1:hover {
            color: #fff;
            transform: translateY(-5px);
            .copywritimg1 {
              animation: landr 0.8s ease-in-out;
            }
          }
        }
        // }
      }
    }
    .recommend::v-deep {
      margin-top: 20px;
      .recommend_top {
        width: 500px;
        margin: 0 auto;
        background: url("~@/assets/images/th_pat_y.png");
        background-repeat: repeat-x !important;
        background-position: 50%;
        span {
          display: inline-block;
          width: 120px;
          font-size: 24px;
          background-color: #f6f6f6;
        }
      }
      .el-divider__text {
        background-color: #f6f6f6;
      }
    }
    .nogoods {
      width: 1200px;
      height: 350px;
      border-radius: 12px;
      // line-height: 200px;
      background: url("~@/assets/images/nogoods.png") no-repeat center;
      background-position-y: 20px;
      background-color: #ecfbf6;
      div {
        margin-top: 60px;
      }
    }
  }
}
</style>
